<template>
  <div class="buy-course">
    <div class="course-list-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/?type=1' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/?type=1' }"
          >科目{{types==1?'一':'四'}}</el-breadcrumb-item
        >
        <el-breadcrumb-item>已购课程</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="course-list">
        <div v-if="courseList.length == 0">
          还没有购买课程o
        </div>
        <div class="course-item" v-for="item in courseList" :key="item.id" @click="gotoDetail(item.id)">
          <img :src="item.full_cover" alt="" />
          <div class="course-title">{{ item.title }}</div>
          <div class="course-info">
            <div class="course-time">{{ item.price }}</div>
            <img src="@/assets/play1.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPurchasedCourses } from '@/api/index.js'
export default {
  name: "BuyCourse",
  data() {
    return {
      types:1,
      courseList: [],
    };
  },
  mounted(){
      this.types = this.$route.query.type
      this.init()
    },
  methods:{
    init(){
      let that = this
      getPurchasedCourses().then(res=>{
        that.courseList = res.data
      })
    },
    gotoDetail(id){
        this.$router.push({
            path:'/BuyCourseDetail',
            query:{
                id
            }
        })
    }
  }
};
</script>

<style lang="scss">
.course-list-box {
  padding: 1.5% 12.5%;

  .course-list {
    padding: 4.4vh 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .course-item {
      width: 22%;
      box-shadow: 0px 3px 10px 0px rgba(153, 153, 153, 0.1);
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      margin-bottom: 2vh;
      user-select: none;

      > img {
        width: 100%;
      }

      > div {
        padding: 2%;
      }

      .course-title {
        color: #333333;
        font-size: 1.8vh;
      }

      .course-info {
        display: flex;
        justify-content: space-between;

        .course-time {
          color: #999999;
          font-size: 1.6vh;
        }

        >img{
            width: 1vw;
            height: 2vh;
        }
      }
    }
  }
}
</style>